<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .news li {
            line-height: 30px;
        }
        
        .news li a {
            color: blue;
            text-decoration: none;
        }
        
        .news li a:hover {
            color: orange;
            text-decoration: underline;
        }
        
        .show {
            width: 300px;
            border: 3px solid #ccc;
            padding: 10px;
            display: none;
            position: absolute;
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="news">
        <ol>
            <li>
                <a href="#" data-tips="新华社北京11月11日电 中共中央总书记、国家主席、中央军委主席习近平近日对平安中国建设作出重要指示指出，近年来，各地区各有关部门贯彻党中央决策部署......">习近平作出重要指示:全面提升平安中国建设水平</a>
            </li>
            <li>
                <a href="#" data-tips="习近平强调，建设更高水平的平安中国意义重大。各地区各有关部门要认真贯彻党的十九届五中全会精神，落实总体国家安全观，坚持共建共治共享方向，聚焦影响国家安全">习近平:大家一起发展才是真发展  三十而立启新程</a>
            </li>
            <li>
                <a href="#" data-tips="平安中国建设工作会议10日在北京召开。中共中央政治局委员、中央政法委书记郭声琨在会上传达习近平重要指示并讲话。他强调，要坚持以习近平新时代中国特色社会主义思想为指导">习近平考察一年来：上海的“变与不变”</a>
            </li>
            <li>
                <a href="#" data-tips="增强“四个意识”、坚定“四个自信”、做到“两个维护”，紧紧围绕坚持和完善中国特色社会主义制度、推进国家治理体系和治理能力现代化总目标，落实总体国家安全观">三十年，浦东勇当创新发展先行者</a>
            </li>
        </ol>
    </div>
    <div class="show">

    </div>
    <script>
        //1.获取元素
        var show = document.querySelector('.show');
        var aA = document.querySelectorAll('.news li a');
        //2.四个a元素添加鼠标移入移出事件
        for (var i = 0; i < aA.length; i++) {
            aA[i].onmouseover = function() { //鼠标移入
                //this:当前操作的a元素。
                //this.getAttribute('data-tips'):获取当前操作的a元素里面的data-tips后面的值。
                show.style.display = 'block';
                show.innerHTML = this.getAttribute('data-tips'); //赋值内容
                //3.当鼠标移入a元素，并且在a元素里面进行移动，show盒子显示并且跟随鼠标。
                this.onmousemove = function(ev) {
                    var ev = ev || window.event;
                    show.style.left = ev.clientX + 10 + 'px';
                    show.style.top = ev.clientY + 10 + 'px';
                }
            };
            aA[i].onmouseout = function() { //鼠标移出
                show.style.display = 'none';
            };
        }
    </script>
</body>

</html>